<template>
    <div class="container">
      <div>
        这是第三个页面！～
      </div>
      
      <div>
        <div class="border-top-1px border-radius-1px border-right-1px border-bottom-100px border-left-1px">asdfasdf</div>
        <ares-button>Button</ares-button>
        <ares-button type="submit">Submit Button</ares-button>
        <ares-loading></ares-loading>
        <ares-loading :size="28"></ares-loading>
        <ares-loading :size="40"></ares-loading>
        <ares-button
          :inline="true"
          :outline="true"
          :primary="true"
          @click="$refs.tip.show()">Show tip</ares-button>
        <ares-tip ref="tip" direction="bottom" style="left:123px;top:50px;">Tip</ares-tip>
        <ares-toolbar :actions="actions" @click="clickHandler"></ares-toolbar>
        <ares-tab-bar
          v-model="selectedLabelDefault"
          :data="tabs"
          @click="clickHandler"
          @change="changeHandler">
        </ares-tab-bar>
        <ares-collapse @change="collapseChang" v-model="activeName">
        <ares-collapse-item :title="'标题1'" name="1">
            <div class="content-text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
          </ares-collapse-item>
          <ares-collapse-item :title="'标题2'" name="2">
            <div class="content-text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
          </ares-collapse-item>
          <ares-collapse-item :title="'标题3'" name="3">
            <div class="content-text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
          </ares-collapse-item>
        </ares-collapse>
        <ares-cell is-link title="原生跳转" 
          label="跳转到 http://10.10.10.109/ares-ui/ui/introduce.html" 
          to="http://10.10.10.109/ares-ui/ui/introduce.html">
        </ares-cell>
        <ares-switch v-model="value">
          Switch
        </ares-switch>
        <ares-form
          :model="model"
          :schema="schema"
          :immediate-validate="false"
          :options="options"
          @validate="validateHandler"
          @submit="submitHandler"
          @reset="resetHandler"></ares-form>
          
      </div>

    </div>
</template>
<script>
//  import 'ares-ui/lib/style/style.css';
export default {
  name: 'ViewDetailInfo',
  data() {
    return {
      money: 10,
      actions: [
        {
          text: '完成订单',
          action: 'showText'
        },
        {
          text: '打车来接',
          checked: false,
          type: 'checkbox'
        },
        {
          text: '一口价<span class="orange">10元</span>',
          action: 'moreMoney'
        }
      ],
      selectedLabelDefault: 'Vip',
      tabs: [{
        label: 'Home',
        icon: 'aresic-home'
      }, {
        label: 'Like',
        icon: 'aresic-like'
      }, {
        label: 'Vip',
        icon: 'aresic-vip'
      }, {
        label: 'Me',
        icon: 'aresic-person'
      }],
      activeName: ['1'],
      value: true,
      validity: {},
      valid: undefined,
      model: {
        checkboxValue: false,
        checkboxGroupValue: [],
        inputValue: '',
        radioValue: '',
        rateValue: 0,
        selectValue: 2018,
        switchValue: true,
        textareaValue: '',
        uploadValue: []
      },
      schema: {
        groups: [
          {
            legend: '基础',
            fields: [
              {
                type: 'checkbox',
                modelKey: 'checkboxValue',
                props: {
                  option: {
                    label: 'Checkbox',
                    value: true
                  }
                },
                rules: {
                  required: true
                },
                messages: {
                  required: 'Please check this field'
                }
              },
              {
                type: 'checkbox-group',
                modelKey: 'checkboxGroupValue',
                label: 'CheckboxGroup',
                props: {
                  options: ['1', '2', '3']
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'input',
                modelKey: 'inputValue',
                label: 'Input',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'radio-group',
                modelKey: 'radioValue',
                label: 'Radio',
                props: {
                  options: ['1', '2', '3']
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'select',
                modelKey: 'selectValue',
                label: 'Select',
                props: {
                  options: [2015, 2016, 2017, 2018, 2019, 2020]
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'switch',
                modelKey: 'switchValue',
                label: 'Switch',
                rules: {
                  required: true
                }
              },
              {
                type: 'textarea',
                modelKey: 'textareaValue',
                label: 'Textarea',
                rules: {
                  required: true
                },
                // debounce validate
                // if set to true, the default debounce time will be 200(ms)
                debounce: 100
              }
            ]
          },
          {
            legend: '高级',
            fields: [
              {
                type: 'rate',
                modelKey: 'rateValue',
                label: 'Rate',
                rules: {
                  required: true
                }
              },
              {
                type: 'upload',
                modelKey: 'uploadValue',
                label: 'Upload',
                events: {
                  'file-removed': (...args) => {
                    console.log('file removed', args)
                  }
                },
                rules: {
                  required: true,
                  uploaded: (val, config) => {
                    return Promise.all(val.map((file, i) => {
                      return new Promise((resolve, reject) => {
                        if (file.uploadedUrl) {
                          return resolve()
                        }
                        // fake request
                        setTimeout(() => {
                          if (i % 2) {
                            reject(new Error())
                          } else {
                            file.uploadedUrl = 'uploaded/url'
                            resolve()
                          }
                        }, 1000)
                      })
                    })).then(() => {
                      return true
                    })
                  }
                },
                messages: {
                  uploaded: '上传失败'
                }
              }
            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: 'Submit'
              },
              {
                type: 'reset',
                label: 'Reset'
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    ceshi() {
      API.get("getSignature", {
        //noncestr: nonceStr,
        //timestamp,
        //url: location.href.split("#")[0],
      })
      .then((result) => {
        console.log(result);
      })
      .catch((err) => {
        console.log("err", err);
      });
    },
    showText(item) {
      this.$createToast({
        type: 'correct',
        txt: 'clicked ' + item.text,
        time: 1000
      }).show()
    },
    moreMoney(item) {
      this.money += 10
      item.text = '一口价<span class="orange">' + this.money + '元</span>'
    },
    clickHandler(item) {
      if (item.action) {
        this[item.action](item)
      }
    },
    clickHandler (label) {
      // if you clicked home tab, then print 'Home'
      console.log(label)
    },
    changeHandler (label) {
      // if you clicked different tab, this methods can be emitted
    },
    collapseChang(name) {
      this.activeName = name
    },
    submitHandler(e) {
      e.preventDefault()
      console.log('submit', e)
    },
    validateHandler(result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
    },
    resetHandler(e) {
      console.log('reset', e)
    }
  },
};
</script>

<style scoped lang='less'>
  /deep/ .ares-switch-ui {
    border-color: green!important;
    background-color: black!important;
  }
</style>
